<template>
    <div>
        <el-card class="box-card">
            <h1>近期菜单安排</h1>
            <el-calendar 
                v-model="selectedDate" 
                :range="weekRange" 
                class="custom-calendar"
                :disabled-date="disabledDate">
                <template #date-cell="{ data }">
                    {{ data.day.split('-').slice(2).join('') }}
                    <span v-if="isDateSelected(data)">✔️</span>
                </template>
            </el-calendar>
            <div v-if="selectedDate">
                <el-tabs v-model="activeMeal">
                    <el-tab-pane label="早餐" name="breakfast">
                        <WeeklyDishesList :meal="mealPlans.breakfast" />
                    </el-tab-pane>
                    <el-tab-pane label="午餐" name="lunch">
                        <WeeklyDishesList :meal="mealPlans.lunch" />
                    </el-tab-pane>
                    <el-tab-pane label="晚餐" name="dinner">
                        <WeeklyDishesList :meal="mealPlans.dinner" />
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!-- 调试输出 
            <pre>{{ selectedDate }}</pre>
            <pre>{{ mealPlans }}</pre>
            -->
        </el-card>
    </div>
</template>

<script>
import { format, startOfWeek, addDays } from 'date-fns';
import apiClient from '../api';
import WeeklyDishesList from './WeeklyDishesList.vue';

export default {
    components: { WeeklyDishesList },
    data() {
        return {
            selectedDate: new Date(), // 默认显示今天的菜单
            activeMeal: 'breakfast',
            mealPlans: {
                breakfast: [],
                lunch: [],
                dinner: []
            }
        };
    },
    computed: {
        weekRange() {
            const start = startOfWeek(new Date(), { weekStartsOn: 7 }); // 星期天为一周的开始
            const end = addDays(start, 13); // 确保只包含两周的日期
            return [start, end];
        }
    },
    methods: {
        async loadMeals() {
            if (!this.selectedDate) return;
            const meals = ['breakfast', 'lunch', 'dinner'];
            try {
                for (const meal of meals) {
                    const response = await apiClient.get('/meal-plans', {
                        params: { date: this.formatDate(this.selectedDate), meal }
                    });
                    this.mealPlans[meal] = response.data;
                }
            } catch (error) {
                console.error('Error loading meals:', error);
            }
        },
        formatDate(date) {
            return format(new Date(date), 'yyyy-MM-dd');
        },
        isDateSelected(data) {
            const formattedDate = this.formatDate(this.selectedDate);
            return data.day === formattedDate;
        },
        disabledDate(date) {
            // 如果需要禁用某些日期，可以在这里添加逻辑
            return false;
        }
    },
    watch: {
        selectedDate() {
            this.loadMeals();
        }
    },
    mounted() {
        this.loadMeals();
    }
};
</script>

<style scoped>
.box-card {
    max-width: 800px;
    margin: 10px auto;
    padding: 10px;
}

.el-calendar {
    --el-calendar-cell-width: auto;
}
</style>